<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Crop Image</title>
    <style type="text/css">
    body{text-align:center;}
    #label{border: 1px solid #ccc;
    background-color: #fff;
    text-align: center;
    height: 300px;
    width: 300px;
    margin: 20px auto;
    position: relative;}

    #get_image{position: absolute;}
    #edit_pic{position: absolute;
    display: none;
    background: #000;}
    #cover_box{position: absolute;
    z-index: 9999;
    display: none;
    top: 0px;
    left: 0px;}
    #show_edit{margin: 0 auto;
    display: inline-block;}
    #show_pic{height: 100px;
    width: 100px;
    border: 2px solid #000;
    overflow: hidden;
    margin: 0 auto;
    display: inline-block;}
    </style>
</head>
<body>
    <input type="file" name="file" id="post_file">
    <button id="save_button">save</button>
    <div id="lalel">
        <canvas id="get_image"></canvas>
        <p>
            <canvas id="cover_box"></canvas>
            <canvas id="edit_pic"></canvas>
        </p>
    </div>

    <p>
        <span id="show_edit"></span>
        <span id="show_pic"><img src=""></span>
    </p>

    <script type="text/javascript" src="imgcut.js"></script>


</body>
</html>